<template>
  <div class="main">
      <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item  :to="{ path: '/reports' }">数据统计</el-breadcrumb-item>
      <el-breadcrumb-item  :to="{ path: '/reports' }">数据报表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
        <div id="cardBox"></div>
    </el-card>
  </div>
</template>

<script>
import { getEcharts} from "../../api/index"
export default {
    name:"",
    data(){
        return{
            list:{},
              options: {
        title: {
          text: "用户来源",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#E9EEF3",
            },
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            boundaryGap: false,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
      },
        }
    },
    mounted(){
        this.initGetCharsData();
    },
    methods:{
        async initGetCharsData(){
            let {data,meta:{status}}=await getEcharts();
              console.log(data)
            if(status!=200) return this.$message.error('请求失败')
          
            this.list=data;
            this.options;
            let newOptions={...this.options,...data}
            this.initEcharts(newOptions)

        },
        initEcharts(options){
            var myChart=this.$echarts.init(document.getElementById("cardBox"))
            // 绘制图表
            myChart.setOption(options);
        }
    }
}
</script>

<style>
.box-card {
  width: 900px;
}
.main {
  padding-left: 20px;
}

.el-table {
  margin-top: 20px;
}
.el-breadcrumb{
  background-color: #fff;
  padding-left: 20px;
}
#cardBox{
  width: 750px;
  height: 400px;
}

</style>